<template>
    <div class="boxContentCss">
        <EdCreateCard title="编辑房屋信息">
            <template #back>
                <div class="createBack" @click="$utilsSet.goBack(router)">
                    <svg-icon icon-class="back" /> 返回
                </div>
            </template>
            <el-form style="padding:45px 45px 15px 15px" :model="form" ref="ruleForm" label-position='right'
                     label-width="auto">
                <el-row :gutter="30">
                    <el-col :span="6">
                        <el-form-item class="width-m25" label="所属项目" prop="villageName"
                                      :rules="$validate.validates({ required: true, msg: '请选择公司名称' })">
                            <el-input class="flex-input" v-model="form.villageName" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item class="width-m25" label="项目分期" prop="stagesName"
                                      :rules="$validate.validates({ required: true, msg: '请输入项目名分期' })">
                            <el-input class="flex-input" v-model="form.stagesName" placeholder="请选择项目分期" disabled>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item class="width-m25" label="楼栋" prop="buildingCode"
                                      :rules="$validate.validates({ required: true, msg: '请输入楼栋' })">
                            <el-input class="flex-input" v-model="form.buildingCode" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item class="width-m25" label="单元" prop="unitName"
                                      :rules="$validate.validates({ required: true, msg: '请输入单元' })">
                            <el-input class="flex-input" v-model="form.unitName" placeholder="请选择单元" disabled>
                            </el-input>
                            <!-- <EdSelect v-model="form.unitName" :selectParams="selectCompany" placeholder="请选择单元"></EdSelect> -->
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-col :span="6">
                            <el-form-item class="width-m25"  label="楼层" prop="showFloor" :rules="$validate.validates({required:true,msg:'请输入楼栋'})">
                                <el-input class="flex-input"  v-model="form.showFloor" placeholder="请输入楼层"></el-input>
                            </el-form-item>
                        </el-col> -->
                <el-row :gutter="30">
                    <el-col :span="6">
                        <el-form-item class="width-m25" label="房间号" prop="roomCode"
                                      :rules="$validate.validates({ required: true, msg: '请输入楼层' })">
                            <el-input v-model="form.roomCode" placeholder="请选择房间号" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item class="width-m25" label="资源类型" prop="type">
                            <EdSelect :selectParams="data.typeParams" v-model="form.type"></EdSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item class="width-m25" label="建筑面积" prop="area">
                            <el-input class="flex-input" @input="limitInput($event, 'area')" v-model="form.area"
                                      placeholder="请输入建筑面积" maxlength="6"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="12">
                        <el-form-item label="绑定业主" prop="ownerName">
                            <el-input v-model="form.ownerName" placeholder="请绑定业主" maxlength="11" disabled>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注" prop="node">
                            <el-input class="flex-input" v-model="form.note" style="width:100%" maxlength="100">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="projectButton">
                    <el-button type="info" @click="saveRoom()" class="ed-button ed_black-bottom">保&nbsp;&nbsp;存
                    </el-button>
                    <el-button @click="$utilsSet.goBack(router)" icon-class="back" class="ed-button ed_white-bottom">
                        取&nbsp;&nbsp;消</el-button>
                </div>
            </el-form>
        </EdCreateCard>
        <EdCreateCard title="业主变更记录" v-show="data.isUpdate">
            <ApiTable :api="changeRecord" ref="table" :params="data.params">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="oldOwnerName" label="变更前业主"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="ownerName" label="变更后业主"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="createTime" label="变更日期"></el-table-column>
            </ApiTable>
        </EdCreateCard>
    </div>
</template>

<script setup>
import { onActivated, onDeactivated, nextTick, ref } from 'vue'
import ApiTable from 'src/components/ApiTable.vue'
import EdSelect from 'src/components/EdSelect.vue'
import EdCreateCard from 'src/components/EdCreateCard.vue'
import EdDateTimePicker from 'src/components/EdDateTimePicker.vue'
import WisdomUploadSingle from "src/components/WisdomUploadSingle.vue";
import { defineComponent, reactive } from 'vue'
import { getHouseDetail, changeRecord, updateList } from "./api.js";
import { getDictByCode } from "src/api/dictionaries";
import message from 'src/utils/once-message'
import router from 'src/router'

const form = reactive({
    address: "",
    area: "",
    buildingCode: "",
    floor: 0,
    identity: 0,
    note: "",
    ownerId: "",
    ownerName: "",
    ownerPhone: "",
    roomCode: "",
    roomId: "",
    showBuildingCode: "",
    showFloor: "",
    showRoomCode: "",
    status: "",
    type: "",
    unit: "",
    unitName: "",
    villageId: "",
    villageName: "",
    stagesName: ""
})

const table = ref()
const ruleForm = ref()

const data = reactive({
    pickerParams: {
        valueFormat: 'yyyy-MM-dd'
    },
    WisdomUploadSingleClass: "class1",
    typeParams: {
        placeholder: "请选择资源类型",
        options: [],
        // props: {label:"label", value:"value"}
    },
    isUpdate: false,
    params: {
        roomId: router.currentRoute.query.id
    }
})

onActivated(() => {
    getDictByCode("resourceType").then(response => {
        console.log(response);
        if (response.success) {
            data.typeParams.options = response.data.items
        }
    })
    if (router.currentRoute.query.id) {
        data.params.roomId = router.currentRoute.query.id
        data.isUpdate = true;
        refreshHouseDetail()
        nextTick(() => {
            table.value.load()
        })
    } else {
        data.isUpdate = false
    }
})
onDeactivated(() => {
    Object.assign(form, {
        address: "",
        area: "",
        buildingCode: "",
        floor: 0,
        identity: 0,
        note: "",
        ownerId: "",
        ownerName: "",
        ownerPhone: "",
        roomCode: "",
        roomId: "",
        showBuildingCode: "",
        showFloor: "",
        showRoomCode: "",
        status: "",
        type: "",
        unit: "",
        unitName: "",
        villageId: "",
        villageName: "",
        stagesName: ""
    })
    data.params = {}
})
function saveRoom() {
    ruleForm.value.validate((valid) => {
        if (!valid) {
            return
        }
        updateList(form).then(response => {
            if (response.success) {
                message.success({
                    message: '修改参数成功',
                    duration: 2000,
                    center: true
                });
                router.back()
            }
        })
    })
}
function refreshHouseDetail() {
    getHouseDetail({
        roomId: router.currentRoute.query.id
    }).then(response => {
        if (response.success) {
            Object.assign(form,response.data)
        }
    })
}
function limitInput(value, name) {
    let val = (value && value.split("")) || [];
    let reg1 = /\d/;
    let reg2 = /\./;
    if (val[0] == ".") {
        data.price = "";
        return;
    }
    val = val.filter((e) => reg1.test(e) || reg2.test(e));
    form.area = val.join("").match(/^\d*(\.?\d{0,2})/g)[0] || null;
}
</script>

<style lang="scss" scoped>
:deep .el-form-item {
    .el-select {
        width: 100%;
    }
}

.width-m50 {
    min-width: 50%;
}

.boxContentCss {
    position: relative;
    padding-bottom: 150px;
}

.projectButton {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    margin-left: 120px;
}

.createBack {
    margin-right: 50px;
}
</style>